<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算器作业</title>
</head>
<body>
    <style>
        input {
          width: 100px;
          /* height: 50px; */
          outline: none;
        }
        select {
          text-align: center;
          width: 40px;
          cursor: pointer;
          outline: none;
        }
        #equal {
          width: 25px;
        }
      </style>
    </head>
    <body>
      <!-- 第一个数 ↓↓↓ -->
      <input type="text" id="frame1" />
      <!-- ↓↓↓中间的下拉选择运算符 -->
      <select name="" id="select">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="×">×</option>
        <option value="÷">÷</option>
        <option value="%">%</option>
      </select>
      <!-- 第二个数 ↓↓↓ -->
      <input type="text" id="frame2" />
      <!-- ↓↓↓等于号按钮 -->
      <input type="submit" value="=" id="equal" onclick="count()" />
      <input type="text" id="frame3" disabled />
      <!-- ↑↑↑这里的 disabled 是禁用这个按钮 无法点击 用来显示结果-->
      <script>
          function count() {
          var frame1 = document.getElementById('frame1').value;//获取第一个数
          var frame2 = document.getElementById('frame2').value;//获取第二个数
          var selection = document.getElementById('select').value;//获取选择的运算符
          var outcome = 0;
  
          if(selection=='+') {
              outcome = parseFloat(frame1) + parseFloat(frame2);
          }else if(selection=='-') {
              outcome = parseFloat(frame1) - parseFloat(frame2);
          }else if(selection=='×') {
              outcome = parseFloat(frame1) * parseFloat(frame2);
          }else if(selection=='÷') {
              outcome = parseFloat(frame1) / parseFloat(frame2);
          }else if(selection=='%') {
              outcome = parseFloat(frame1) % parseFloat(frame2);
          }
          document.getElementById('frame3').value = outcome;
          //↑↑↑获取outcome的计算结果 赋值给frame3
          }
          </script>
//=================================================================================
      <!-- 第一个输入框 -->
    <input type="text" id="first" />
    <!-- 中间的+ - × ÷ -->
    <select name="" id="method">
      <option value="+">+</option>
      <option value="-">-</option>
      <option value="×">×</option>
      <option value="÷">÷</option>
    </select>
    <!-- 第三个输入框 -->
    <input type="text" id="second" />
    <!-- 按钮↓ -->
    <button id="btn">=</button>
    <!-- 显示结果的文本框 禁止用户点击  disabled就是禁止-->
    <input type="text" id="result" disabled />
    <script>
      //1.给按钮有点击行为
      btn.onclick = function () {
        //2.拿到用户输入的文本内容 和计算方式
        var n1 = first.value - 0;
        var n2 = second.value - 0;
        var type = method.value;
        //3.准备一个变量接收计算结果
        var res = 0;
        console.log(type);
        //4.进行运算类型的判断
        switch (type) {
          case "+":
            res = n1 + n2;
            break;
          case "-":
            res = n1 - n2;
            break;
          case "×":
            res = n1 * n2;
            break;
          case "÷":
            rse = n1 / n2;
            break;
        }
        //5.把结果放到我们的input内
        result.value = res;
      };
    </script>
</body>
</html>